<template>
  <div class="views" id="views">
    <el-container style="height: 100%">
      <el-aside width="20%">
        <el-menu :default-active="default_active" class="el-menu-vertical-demo" router unique-opened @open="handleOpen"
                 @close="handleClose">
          <el-submenu v-for="(item, index) in menuData" :key="index" :index="index+''">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span slot="title">{{ item.title + `（${item.children.length}项）` }}</span>
            </template>
            <el-menu-item v-for="(item2, index2) in item.children" :key="index2" :index="item2.path">
              <template slot="title">
<!--                <i class="el-icon-location"></i>-->
                <span slot="title">{{ item2.title }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      default_active: '',
      menuData: [
        {
          title: '开始',
          children: [
            {
              title: 'HelloWorld',
              path: 'hello_world'
            }
          ]
        },
        {
          title: '场景',
          children: [
            {
              title: '天空',
              path: 'sky'
            }, {
              title: '场景背景图',
              path: 'scene_background'
            }, {
              title: '场景天空盒',
              path: 'scene_background_cube'
            }
          ]
        },
        {
          title: '相机',
          children: [
            {
              title: '相机飞行',
              path: 'flyto'
            }, {
              title: '相机飞行到模型周围',
              path: 'flyto_obj'
            }, {
              title: '漫游',
              path: 'roam'
            }
          ]
        },
        {
          title: '模型',
          children: [
            {
              title: '获取模型层级',
              path: 'model_tier'
            }, {
              title: '向树形数据每一级添加父级参数',
              path: 'parent_to_tree'
            }, {
              title: '获取模型世界坐标',
              path: 'obj_world_position'
            }, {
              title: '获取模型间距离',
              path: 'get_obj_distance'
            }, {
              title: '模型动画',
              path: 'animations'
            }
          ]
        },
        {
          title: '标签',
          children: [
            {
              title: '精灵文字',
              path: 'spriteText'
            },
            {
              title: '精灵标签',
              path: 'spriteLabel'
            }, {
              title: 'div精灵标签',
              path: 'divSpriteLabel'
            }, {
              title: '2DCss标签',
              path: '2DLabel'
            }, {
              title: '3DCss标签',
              path: '3DLabel'
            }
          ]
        },
        {
          title: '事件',
          children: [
            {
              title: '事件监听',
              path: 'event_listener'
            }, {
              title: '移除事件监听',
              path: 'remove_event_listener'
            }
          ]
        },
        {
          title: '插件',
          children: [
            {
              title: 'Gui',
              path: 'gui'
            }, {
              title: 'Stats',
              path: 'stats'
            }
          ]
        },
        {
          title: '后期处理',
          children: [
            {
              title: '边缘轮廓发光',
              path: 'outline'
            }, {
              title: '辉光',
              path: 'unreal_bloom'
            }
          ]
        },
        {
          title: '控制器',
          children: [
            {
              title: '轨道控制器',
              path: 'orbit_controls'
            }, {
              title: '第一人称相机控制',
              path: 'first_person'
            }
          ]
        },
        {
          title: '简单案例',
          children: [
            {
              title: '智慧实验室',
              path: 'smart_lab'
            }
          ]
        },
        {
          title: '测试',
          children: [
            {
              title: '测试',
              path: 'test'
            }
          ]
        }
      ]
    }
  },
  mounted () {
    this.default_active = this.$route.path.replace('/', '')
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style scoped>
.views {
  height: 100%;
  width: 100%;
}

.el-aside {
  height: 100%;
  padding: 0;
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 100%;
  min-height: 400px;
}

/deep/ .el-submenu__title {
  font-size: 16px !important;
  text-align: left;
  font-weight: bold;
  padding: 0;
  margin: 0;
}

.el-menu-item {
  text-align: left;
}

.el-main {
  height: 100%;
  width: 80%;
  padding: 0;
}
</style>
